<script setup>
import { usePopup } from '@/hooks/usePopup'
import HistoricalVideosPopup from '@/views/new-screen/components/historical-videos-popup.vue'
const { removePopup, createPopup, setPopup } = usePopup()
const key = 'spjk'

const propertyList = [
  {
    property: '设备名称',
    key: 'name',
    value: '设备2751v-3',
  },
  {
    property: '设备位置',
    value: '蔡家园区',
  },
  {
    property: '设备状态',
    key: 'status',
    value: '离线',
  },
  {
    property: '设备类型',
    key: 'type',
    value: '电子围栏',
  },
  {
    property: '设备序列号',
    value: '152648zxf',
  },
  {
    property: '设备型号',
    value: '2751v-312546',
  },
  {
    property: '历史视频',
    value: '点击播放',
    key: 'video',
  },
]

const handleVideoPlay = (key) => {
  if (key === 'video') {
    const popup = createPopup(HistoricalVideosPopup, null, {
      id: 'historical-video-popup',
    })
    setPopup('historical-video', popup)
  }
}
</script>

<template>
  <div class="device-spjk-popup" v-drag="{ target: '.title-area' }">
    <div class="title-area">
      <div class="title"></div>
      <div class="title-right" @click="removePopup(key)"></div>
    </div>
    <div class="content-area">
      <el-row :gutter="24">
        <el-col
          :class="item.key"
          :span="24"
          v-for="(item, index) in propertyList"
          :key="index"
          ><span class="property">{{ item.property }}:</span
          ><span class="value" @click="handleVideoPlay(item.key)">{{
            item.value
          }}</span></el-col
        >
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
.device-spjk-popup {
  width: 356px;
  height: 326px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: url('@/assets/imgs/box_sbxx_spjk.png') 100% 100% no-repeat;
  z-index: 998;

  .title-area {
    height: 40px;
    display: flex;
    justify-content: space-between;

    .title {
      margin-left: 33px;
      width: 87px;
      height: 31px;
      background: url('@/assets/imgs/sbxi_title.png') 100% 100% no-repeat;
    }

    .title-right {
      width: 16px;
      height: 16px;
      background: url('@/assets/imgs/ic_gb.png') 100% 100% no-repeat;
      margin-top: 24px;
      margin-right: 24px;
      cursor: pointer;
    }
  }

  .content-area {
    padding: 14px 26px;

    :deep(.el-row) {
      .el-col {
        font-size: 14px;
        margin-bottom: 20px;
        color: white;
        .property {
          color: rgba(150, 186, 208, 1);
        }

        .value {
          margin-left: 9px;
        }

        &.name {
          font-size: 16px;
          font-weight: 500;
          color: #25d7f1;
          .property {
            color: #25d7f1;
          }
        }

        &.type {
          .value {
            color: #00ff96;
          }
        }

        &.video {
          .value {
            text-decoration: underline;
            color: #fbaa37;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
